<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./css/game_hall.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: '#1D2129',
                        'iron': '#858D96',
                        'bronze': '#CD7F32',
                        'silver': '#C0C0C0',
                        'gold': '#FFD700',
                        'platinum': '#E5E4E2',
                        'diamond': '#B9F2FF',
                        '超凡': '#FF00FF',
                        '神话': '#FF4500',
                        '赋能': '#00FF00',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .rank-card {
                @apply rounded-xl p-6 shadow-lg transition-all duration-300;
            }
            .rank-icon {
                @apply text-4xl mr-2;
            }
            .stats-grid {
                @apply grid grid-cols-1 md:grid-cols-3 gap-4 mt-4;
            }
            .stat-card {
                @apply bg-neutral/50 rounded-lg p-3 text-center;
            }
            .match-btn {
                @apply bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-full text-lg shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50 flex items-center justify-center mx-auto;
            }
            .matching-btn {
                @apply bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full text-lg shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-400/50 flex items-center justify-center mx-auto;
            }
            .unranked-badge {
                @apply bg-gray-600 text-white rounded-full px-4 py-2 text-center inline-block;
            }
            .online-user-list {
                @apply fixed right-0 top-0 h-full bg-neutral/90 backdrop-blur-md shadow-2xl w-64 border-l border-gray-700 overflow-y-auto z-40;
            }
            .user-item {
                @apply flex items-center p-3 hover:bg-gray-800 transition-colors;
            }
            .user-avatar {
                @apply w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center overflow-hidden mr-3 relative;
            }
            .status-dot {
                @apply w-3 h-3 rounded-full absolute bottom-0 right-0 border-2 border-neutral;
            }
            .section-header {
                @apply text-xs font-semibold text-gray-400 uppercase tracking-wider px-3 py-2 bg-gray-800;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white font-sans">
    <!-- 在线用户列表侧边栏 -->
    <div class="online-user-list">
        <div class="p-4 border-b border-gray-700">
            <h3 class="text-lg font-bold flex items-center">
                <i class="fa fa-users mr-2 text-primary"></i>
                好友列表 <span id="online-count" class="ml-2 text-sm bg-primary/30 px-2 py-0.5 rounded-full">0</span>
            </h3>
        </div>
        
        <!-- 在线好友部分 -->
        <div class="section-header">在线好友</div>
        <div id="online-friends-container" class="p-2">
            <!-- 在线好友将通过JS动态生成 -->
            <div class="text-center text-gray-400 py-5">
                <p>加载中...</p>
            </div>
        </div>
        
        <!-- 离线好友部分 -->
        <div class="section-header">离线好友</div>
        <div id="offline-friends-container" class="p-2">
            <!-- 离线好友将通过JS动态生成 -->
            <div class="text-center text-gray-400 py-5">
                <p>加载中...</p>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <nav class="bg-neutral/80 backdrop-blur-md shadow-lg sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-center items-center">
            <div class="text-2xl font-bold text-primary flex items-center">
                <i class="fa fa-gamepad mr-2"></i>
                <span>网络五子棋对战游戏</span>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-8 max-w-5xl">
        <!-- 页面标题 -->
        <div class="text-center mb-10">
            <h1 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-2">游戏大厅</h1>
            <p class="text-gray-400 text-lg">欢迎回来，<span id="username-display" class="text-primary"></span></p>
        </div>

        <!-- 用户信息卡片 -->
        <div class="max-w-3xl mx-auto mb-12">
            <div id="user-info-card" class="rank-card bg-neutral/50 border border-gray-700">
                <div class="flex flex-col md:flex-row items-center justify-between">
                    <!-- 用户基本信息 -->
                    <div class="flex flex-col md:flex-row items-center mb-6 md:mb-0">
                        <div class="mb-4 md:mb-0 mr-0 md:mr-6 flex-shrink-0">
                            <div id="avatar-container" class="w-20 h-20 rounded-full bg-neutral flex items-center justify-center border-4 relative">
                                <i class="fa fa-user text-4xl text-gray-400"></i>
                                <span class="status-dot bg-green-500"></span>
                            </div>
                        </div>
                        <div class="text-center md:text-left">
                            <h2 id="display-name" class="text-2xl font-bold mb-1"></h2>
                            <div class="flex items-center justify-center md:justify-start mb-2">
                                <span id="win-rate" class="text-gray-300">胜率: 68%</span>
                            </div>
                            <div id="rank-display" class="flex items-center justify-center md:justify-start text-xl font-semibold">
                                <i class="fa fa-diamond mr-2 text-gold"></i>
                                <span>黄金 III 25胜点</span>
                            </div>
                        </div>
                    </div>

                    <!-- 统计信息 -->
                    <div id="stats-container" class="stats-grid w-full md:w-auto mt-4 md:mt-0">
                        <div class="stat-card">
                            <div class="text-gray-400 text-sm mb-1">总对局</div>
                            <div id="total-games" class="text-xl font-bold">128</div>
                        </div>
                        <div class="stat-card">
                            <div class="text-gray-400 text-sm mb-1">胜场</div>
                            <div id="win-games" class="text-xl font-bold text-green-500">87</div>
                        </div>
                        <div class="stat-card">
                            <div class="text-gray-400 text-sm mb-1">段位积分</div>
                            <div id="rank-points" class="text-xl font-bold">1250</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 未参加排位赛提示 -->
            <div id="unranked-message" class="hidden">
                <div class="bg-neutral/50 rounded-xl p-6 text-center">
                    <div class="text-4xl mb-4"><i class="fa fa-meh-o text-gray-400"></i></div>
                    <h3 class="text-xl font-bold mb-2">还没参加排位赛</h3>
                    <p class="text-gray-400 mb-4">点击下方按钮开始你的第一场排位赛，展现你的实力！</p>
                    <div class="text-sm text-gray-500">完成1场排位赛后，将获得初始段位</div>
                </div>
            </div>
        </div>

        <!-- 匹配区域 -->
        <div class="max-w-lg mx-auto text-center">
            <div class="mb-8">
                <h2 class="text-2xl font-bold mb-4">寻找对手</h2>
                <p class="text-gray-400 mb-6">点击下方按钮开始匹配对手，我们将为您寻找实力相当的玩家</p>
                
                <button id="match-button" class="match-btn">
                    <i class="fa fa-search mr-2"></i>开始匹配
                </button>
                
                <div id="matching-status" class="mt-6 hidden">
                    <div class="inline-block p-4 rounded-full bg-neutral/50">
                        <div class="w-16 h-16 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                        <p class="text-lg">正在寻找对手中...</p>
                        <p class="text-gray-400 text-sm mt-1">匹配队列中: <span id="matching-time">0</span> 秒</p>
                    </div>
                </div>
            </div>

            <!-- 段位说明 -->
            <div id="rank-guide" class="bg-neutral/30 rounded-xl p-6 mb-8">
                <h3 class="text-xl font-bold mb-4 flex items-center">
                    <i class="fa fa-info-circle mr-2 text-primary"></i>段位说明
                </h3>
                <div class="grid grid-cols-3 md:grid-cols-4 gap-4">
                    <div class="text-center">
                        <div class="text-iron mb-1"><i class="fa fa-circle"></i></div>
                        <div class="text-sm">黑铁</div>
                    </div>
                    <div class="text-center">
                        <div class="text-bronze mb-1"><i class="fa fa-circle"></i></div>
                        <div class="text-sm">青铜</div>
                    </div>
                    <div class="text-center">
                        <div class="text-silver mb-1"><i class="fa fa-circle"></i></div>
                        <div class="text-sm">白银</div>
                    </div>
                    <div class="text-center">
                        <div class="text-gold mb-1"><i class="fa fa-diamond"></i></div>
                        <div class="text-sm">黄金</div>
                    </div>
                    <div class="text-center">
                        <div class="text-platinum mb-1"><i class="fa fa-star"></i></div>
                        <div class="text-sm">铂金</div>
                    </div>
                    <div class="text-center">
                        <div class="text-diamond mb-1"><i class="fa fa-certificate"></i></div>
                        <div class="text-sm">钻石</div>
                    </div>
                    <div class="text-center">
                        <div class="text-超凡 mb-1"><i class="fa fa-trophy"></i></div>
                        <div class="text-sm">超凡</div>
                    </div>
                    <div class="text-center">
                        <div class="text-神话 mb-1"><i class="fa fa-diamond"></i></div>
                        <div class="text-sm">神话</div>
                    </div>
                    <div class="text-center col-span-3 md:col-span-1">
                        <div class="text-赋能 mb-1"><i class="fa fa-rocket"></i></div>
                        <div class="text-sm">赋能</div>
                    </div>
                </div>
                <div class="mt-4 text-sm text-gray-400 text-center">
                    <p>每个段位分为 I-IV 四个小段位，I 为最高小段位</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral/80 backdrop-blur-md py-6 mt-12">
        <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
            <p>© 2025 网络五子棋对战游戏 版权所有</p>
        </div>
    </footer>

    <script src="./js/jquery.min.js"></script>
    <script>
        // 段位映射表
        const ladderMap = {
            1: { name: '黑铁', color: 'iron', icon: 'fa-circle' },
            2: { name: '青铜', color: 'bronze', icon: 'fa-circle' },
            3: { name: '白银', color: 'silver', icon: 'fa-circle' },
            4: { name: '黄金', color: 'gold', icon: 'fa-diamond' },
            5: { name: '铂金', color: 'platinum', icon: 'fa-star' },
            6: { name: '钻石', color: 'diamond', icon: 'fa-certificate' },
            7: { name: '超凡', color: '超凡', icon: 'fa-trophy' },
            8: { name: '神话', color: '神话', icon: 'fa-diamond' },
            9: { name: '赋能', color: '赋能', icon: 'fa-rocket' }
        };
        
        // 小段位数字转罗马数字（反转映射）
        const rankToRoman = {
            1: 'IV',
            2: 'III',
            3: 'II',
            4: 'I'
        };

        // 按钮状态
        let buttonFlag = "stop";
        let wsHdl = null;
        let matchingTimer = null;
        let matchingSeconds = 0;
        let currentUserId = null; // 当前用户ID，用于排除自己

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 获取用户信息并显示
            getUserInfo();
            
            // 绑定匹配按钮点击事件
            const matchButton = document.getElementById('match-button');
            matchButton.addEventListener('click', handleMatchButtonClick);
        });

        // 获取并显示用户信息
        function getUserInfo() {
            $.ajax({
                url: "/info",
                type: "get",
                success: function(res) {
                    // 保存当前用户ID
                    currentUserId = res.id;
                    
                    // 计算胜率
                    const winRate = res.total_count > 0 ? Math.round((res.win_count / res.total_count) * 100) : 0;
                    
                    // 更新用户名显示
                    const username = res.username || '玩家';
                    document.getElementById('username-display').textContent = username;
                    document.getElementById('display-name').textContent = username;
                    
                    // 处理未参加排位赛的情况
                    if (res.ladder === 0) {
                        document.getElementById('user-info-card').classList.add('hidden');
                        document.getElementById('unranked-message').classList.remove('hidden');
                    } else {
                        // 正常显示段位信息
                        document.getElementById('user-info-card').classList.remove('hidden');
                        document.getElementById('unranked-message').classList.add('hidden');
                        
                        // 获取段位信息
                        const ladderInfo = ladderMap[res.ladder] || ladderMap[1];
                        const romanRank = rankToRoman[res.rank] || 'I';
                        
                        // 更新页面元素
                        document.getElementById('win-rate').textContent = `胜率: ${winRate}%`;
                        document.getElementById('total-games').textContent = res.total_count;
                        document.getElementById('win-games').textContent = res.win_count;
                        document.getElementById('rank-points').textContent = res.score;
                        
                        // 更新段位显示
                        const rankDisplay = document.getElementById('rank-display');
                        rankDisplay.innerHTML = `<i class="fa ${ladderInfo.icon} mr-2 text-${ladderInfo.color}"></i><span>${ladderInfo.name} ${romanRank} ${res.score}胜点</span>`;
                        
                        // 设置段位徽章颜色
                        document.querySelector('.w-20.h-20.rounded-full.border-4').className += ` border-${ladderInfo.color}`;
                    }
                    
                    // 确保段位说明始终显示
                    document.getElementById('rank-guide').classList.remove('hidden');
                    
                    // 初始化WebSocket连接
                    initWebSocket();
                },
                error: function(xhr) {
                    alert(JSON.stringify(xhr));
                    location.replace("/login.html");
                }
            });
        }

        // 初始化WebSocket连接
        function initWebSocket() {
            try {
                const wsUrl = "ws://" + location.host + "/hall";
                wsHdl = new WebSocket(wsUrl);
                
                wsHdl.onopen = function() {
                    console.log("WebSocket连接已建立");
                    // 连接成功后请求好友列表
                    requestFriendList();
                };
                
                wsHdl.onmessage = function(evt) {
                    console.log(evt.data);
                    const rspJson = JSON.parse(evt.data);
                    
                    if (rspJson.result === false) {
                        alert(evt.data);
                        location.replace("/login.html");
                        return;
                    }
                    
                    if (rspJson["optype"] == "hall_ready") {
                        console.log("游戏大厅连接建立成功！");
                    } else if (rspJson["optype"] == "match_success") {
                        // 对战匹配成功，清除计时器
                        stopMatchingTimer();
                        alert("对战匹配成功，进入游戏房间！");
                        location.replace("/game_room.html");
                    } else if (rspJson["optype"] == "match_start") {
                        console.log("玩家已经加入匹配队列");
                        buttonFlag = "start";
                        updateMatchButton();
                        document.getElementById('matching-status').classList.remove('hidden');
                        //开始计时
                        startMatchingTimer();
                    } else if (rspJson["optype"] == "match_stop") {
                        console.log("玩家已经移除匹配队列");
                        buttonFlag = "stop";
                        updateMatchButton();
                        document.getElementById('matching-status').classList.add('hidden');
                        // 停止计时
                        stopMatchingTimer();
                    } else if (rspJson["optype"] == "friend_list") {
                        // 接收好友列表
                        renderFriendList(rspJson.data);
                    } else if (rspJson["optype"] == "friend_status_change") {
                        // 好友状态变化
                        updateFriendStatus(rspJson.data);
                    } else if (rspJson["optype"] == "invite_response") {
                        // 处理对战邀请响应
                        handleInviteResponse(rspJson.data);
                    } else {
                        alert("未知请求类型");
                        console.log("收到未知消息:", rspJson);
                    }
                };
                
                wsHdl.onclose = function() {
                    console.log("WebSocket连接已关闭");
                    // 显示连接关闭提示
                    document.getElementById('online-friends-container').innerHTML = `
                        <div class="text-center text-gray-400 py-5">
                            <p>连接已断开，正在重连...</p>
                        </div>
                    `;
                    document.getElementById('offline-friends-container').innerHTML = `
                        <div class="text-center text-gray-400 py-5">
                            <p>连接已断开，正在重连...</p>
                        </div>
                    `;
                    // 尝试重连
                    setTimeout(initWebSocket, 3000);
                };
                
                wsHdl.onerror = function(error) {
                    console.error("WebSocket错误:", error);
                    alert("连接服务器失败，请稍后再试");
                };
            } catch (e) {
                console.error("创建WebSocket连接失败:", e);
                alert("连接服务器失败，请稍后再试");
            }
        }

        // 请求好友列表
        function requestFriendList() {
            if (wsHdl && wsHdl.readyState === WebSocket.OPEN) {
                const reqJson = {
                    optype: "get_friend_list"
                };
                wsHdl.send(JSON.stringify(reqJson));
            }
        }

        // 渲染好友列表
        function renderFriendList(friends) {
            const onlineFriends = friends.filter(friend => friend.status === '在线');
            const offlineFriends = friends.filter(friend => friend.status !== '在线');
            
            // 更新在线用户数量
            document.getElementById('online-count').textContent = `${onlineFriends.length}/${friends.length}`;
            
            // 渲染在线好友
            const onlineContainer = document.getElementById('online-friends-container');
            if (onlineFriends.length === 0) {
                onlineContainer.innerHTML = `
                    <div class="text-center text-gray-400 py-5">
                        <p>没有在线的好友</p>
                    </div>
                `;
            } else {
                let html = '';
                onlineFriends.forEach(friend => {
                    const ladderInfo = ladderMap[friend.ladder] || ladderMap[1];
                    
                    html += `
                    <div class="user-item" data-id="${friend.id}">
                        <div class="user-avatar">
                            <i class="fa fa-user text-xl text-gray-400"></i>
                            <span class="status-dot bg-green-500"></span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between">
                                <h4 class="font-medium text-sm truncate">${friend.username}</h4>
                                <span class="text-xs text-gray-400">在线</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">${ladderInfo.name}</span>
                                <button class="invite-btn ml-2 text-primary text-sm opacity-75 hover:opacity-100 transition-opacity"
                                        onclick="sendChallenge(${friend.id}, '${friend.username}')">
                                    <i class="fa fa-gamepad"></i> 邀请
                                </button>
                            </div>
                        </div>
                    </div>
                    `;
                });
                onlineContainer.innerHTML = html;
            }
            
            // 渲染离线好友
            const offlineContainer = document.getElementById('offline-friends-container');
            if (offlineFriends.length === 0) {
                offlineContainer.innerHTML = `
                    <div class="text-center text-gray-400 py-5">
                        <p>没有离线的好友</p>
                    </div>
                `;
            } else {
                let html = '';
                offlineFriends.forEach(friend => {
                    const ladderInfo = ladderMap[friend.ladder] || ladderMap[1];
                    
                    html += `
                    <div class="user-item" data-id="${friend.id}">
                        <div class="user-avatar">
                            <i class="fa fa-user text-xl text-gray-400"></i>
                            <span class="status-dot bg-gray-500"></span>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between">
                                <h4 class="font-medium text-sm truncate">${friend.username}</h4>
                                <span class="text-xs text-gray-400">离线</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-400">${ladderInfo.name}</span>
                                <button class="invite-btn ml-2 text-primary text-sm opacity-50 cursor-not-allowed" disabled>
                                    <i class="fa fa-gamepad"></i> 邀请
                                </button>
                            </div>
                        </div>
                    </div>
                    `;
                });
                offlineContainer.innerHTML = html;
            }
        }

        // 更新好友状态
        function updateFriendStatus(friend) {
            // 重新请求好友列表并刷新显示
            requestFriendList();
        }

        // 发送对战邀请
        function sendChallenge(userId, username) {
            if (!wsHdl || wsHdl.readyState !== WebSocket.OPEN) {
                alert("与服务器的连接已断开，请刷新页面重试");
                return;
            }
            
            if (buttonFlag === "start") {
                alert("您正在匹配队列中，无法发送邀请");
                return;
            }
            
            const confirmSend = confirm(`确定要向 ${username} 发送对战邀请吗？`);
            if (confirmSend) {
                const reqJson = {
                    optype: "send_challenge",
                    target_user_id: userId
                };
                wsHdl.send(JSON.stringify(reqJson));
            }
        }

        // 处理对战邀请响应
        function handleInviteResponse(data) {
            if (data.accepted) {
                // 对方接受邀请，进入游戏房间
                stopMatchingTimer();
                alert("对方接受了您的对战邀请，进入游戏房间！");
                location.replace("/game_room.html");
            } else {
                // 对方拒绝邀请
                alert("对方拒绝了您的对战邀请");
            }
        }

        // 处理匹配按钮点击
        function handleMatchButtonClick() {
            if (!wsHdl || wsHdl.readyState !== WebSocket.OPEN) {
                alert("与服务器的连接已断开，请刷新页面重试");
                return;
            }
            
            if (buttonFlag == "stop") {
                // 开始匹配
                const reqJson = {
                    optype: "match_start"
                };
                wsHdl.send(JSON.stringify(reqJson));
            } else {
                // 停止匹配
                const reqJson = {
                    optype: "match_stop"
                };
                wsHdl.send(JSON.stringify(reqJson));
            }
        }

        // 开始匹配计时器
        function startMatchingTimer() {
            // 重置计时
            matchingSeconds = 0;
            document.getElementById('matching-time').textContent = matchingSeconds;
            
            // 启动计时器，每秒更新一次
            matchingTimer = setInterval(function() {
                matchingSeconds++;
                document.getElementById('matching-time').textContent = matchingSeconds;
            }, 1000);
        }

        // 停止匹配计时器
        function stopMatchingTimer() {
            if (matchingTimer) {
                clearInterval(matchingTimer);
                matchingTimer = null;
                matchingSeconds = 0;
                document.getElementById('matching-time').textContent = matchingSeconds;
            }
        }

        // 更新匹配按钮状态
        function updateMatchButton() {
            const matchButton = document.getElementById('match-button');
            
            if (buttonFlag == "start") {
                matchButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>匹配中...点击停止';
                matchButton.className = 'matching-btn';
            } else {
                matchButton.innerHTML = '<i class="fa fa-search mr-2"></i>开始匹配';
                matchButton.className = 'match-btn';
            }
        }

        // 页面卸载前关闭WebSocket连接
        window.onbeforeunload = function() {
            if (wsHdl) {
                wsHdl.close();
            }
            stopMatchingTimer();
        };
    </script>
</body>
</html>
